<template>
    <div class="team">
        <el-title :title="title"></el-title>
        <div class="team_cn">
          <div class="flex-just-sbtn">
            <div class="team_btn" style="display:inline-block;">
              <el-button style="background:#31bdce;color:white;" @click="drawerd = true">新建</el-button>
            </div>
            <div class="export_btn">
              <!-- <el-button style="background:#31bdce;color:white;" @click="handleExportClick">导出</el-button> -->
              <!-- <el-button style="background:#31bdce;color:white;" @click="">导入</el-button> -->
            </div>
          </div>
        
        <!-- 表格 -->
        <el-tabs v-model="activeName" @tab-click="handleClick" class="dep">
          <el-tab-pane v-for="(item,i) in paneList" :key="i" :label="item.dept_name" :name="item.index">
            <user-list :type="item.dept_id" ref="userListBox" ></user-list>
          </el-tab-pane>
          <!-- <el-tab-pane label="镇街" name="first">
            <user-list></user-list>
          </el-tab-pane> -->
          <!-- <el-tab-pane label="协调监督" name="first">
            <user-list></user-list>
          </el-tab-pane> -->
        </el-tabs>

        <!-- 抽屉 -->
        <el-drawer
            title="新建"
            :visible.sync="drawerd"
            :wrapperClosable="false"
            class="drawerd"
            :before-close="handleClosed">
            <el-form :model="newUser" status-icon :rules="user" ref="newUser" label-width="100px" class="newUser">
                <el-form-item label="用户名:" prop="username">
                    <el-input type="text" v-model="newUser.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="单位:" prop="company">
                    <el-input type="text" v-model="newUser.company" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系人:" prop="person">
                    <el-input type="text" v-model="newUser.person" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所属区域:" prop="region">
                    <el-select v-model="newUser.region" placeholder="请选择" @change="chRegion">
                        <el-option
                            v-for="(item,index) in optionsd"
                            :key="index"
                            :class="{'activeTwo' : item.level == 1 , 'activethree' : item.level == 2}"
                            :label="item.dept_name"
                            :value="item.dept_id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="手机号:" prop="phone">
                    <el-input type="text" v-model="newUser.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码:" prop="pass"> 
                    <el-input type="text" v-model="newUser.pass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码:" prop="checkpass"> 
                    <el-input type="text" v-model="newUser.checkpass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="权限:" prop="role">
                    <el-select v-model="newUser.role" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('newUser')">创建</el-button>
                    <el-button @click="resetForm('newUser')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>

       
       </div>
    </div>
</template>

<script>
import elTitle from '@/components/title.vue'
import {register,userList,deptlist,tblist,userInfo} from '@/utils/index.js'
import UserList from '../../components/user_center/userList.vue';
export default {
  data() {
    return {
      
      dialogVisible:false,
      drawer:false,
      drawerd:false,
      activeName: 'first',
      currentPage1: 1,
      pagesize: 10,
      search:'',
      optionsd:[],
      
      options:[{id:0,name:'普通会员'},{id:1,name:'管理员'},{id:2,name:'超级管理员'}],
      paneIndex:[{index:'first'},{index:'second'},{index:'three'},{index:'four'},{index:'five'}],
      paneList:[],
      newUser:{
          username:'',
          pass:'',
          region:'',
          role:'',
          phone:'',
          checkpass:"",
          company:'',
          person:''
      },
      user:{},
      
      multipleSelection: [],
      totald:0,
      totals:0,
      page:'',
      title:'单位管理',
      tableDatad:[],
      total:0,
      tableDatadd:[],
      d_id:'',
      // 
      tabType: 0,
    };
  },
  components:{
    elTitle,
    UserList
  },
  created(){
    userInfo().then((res)=>{
      this.d_id = res.data.d_id
      tblist({deptid:this.d_id}).then((res)=>{
        // console.log(res)
        this.paneList = res.data
        // console.log(this.paneList)
        var obj = this.paneList.map((item,index) => {
          return {...this.paneIndex[index],...item}
        })
        this.paneList = obj
      })
      deptlist({type:'list',deptid:this.d_id}).then((res)=>{
        // console.log(res)
        this.optionsd = res.data
      })
    }),
    
    
    // deptlist({type:'list',deptid:this.d_id}).then((res)=>{
    //   console.log(res)
    //   this.optionsd = res.data
      
      // res.data.forEach((item)=>{
      //   if(item.level == 1){
      //     this.quyuList.push(item)
      //   }
      // })
      // this.paneList = res.data
      // console.log(this.paneList)
      // var obj = this.paneList.map((item,index) => {
      //   return {...this.paneIndex[index],...item}
      // })
      // this.paneList = obj

      // res.data.forEach((item)=>{
      //     this.optionsd.push(item)
      //   item.child.forEach((item1)=>{
      //     console.log(item)
      //     console.log(item1)
      //     this.optionsd.push(item1)
      //   })
      // })
    // })

    // userList({
    //   type:'1'
    // }).then((res)=>{
    //   console.log(res)
    //   this.tableData = res.data.data
    //   this.totals = res.data.total
    // })
    // userList({
    //   type:'2'
    // }).then((res)=>{
    //   console.log(res)
    //   this.tableDatad = res.data.data
    //   this.total = res.data.total
    // })
    // userList({
    //   type:'3'
    // }).then((res)=>{
    //   this.tableDatadd = res.data.data
    //   this.totald = res.data.total
    // })
    setTimeout(()=>{
      // console.log(this.$store.state.userInfo.member)
      if(this.$store.state.userInfo.member == 1){
        this.options.splice(1,2)
      }
    },500)
  },
  methods: {
    
    chRegion(){
      // console.log(this.newUser.region)
      
    },
    // 标签页
    handleClick(tab) {
      console.log(tab.index);
      this.tabType = tab.index;
      // console.log(this.$refs.userListBox)
      this.$refs.userListBox[0].clearSearchVal()
      this.$refs.userListBox[1].clearSearchVal()
      this.$refs.userListBox[2].clearSearchVal()
      // .clearSearchVal();
    },
    //   抽屉
    handleClosed(){
        this.drawerd = false
    },
    
    
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 表格
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 分页
    handleSizeChange(val) {
      console.log(val)
    },
    handleCurrentChange(val) {
      // console.log(val)
      this.page=val
      userList({
        page:val,
        type:'1'
      }).then((res)=>{
        this.tableData = res.data.data
        this.totals = res.data.total
      })
    },
    handleCurrentChanged(val){
      // console.log(val)
      userList({
        page:val,
        type:'2'
      }).then((res)=>{
        this.tableData = res.data.data
        this.totals = res.data.total
      })
    },
    
    // 创建用户
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log(this.newUser.region)
          register({
            username:this.newUser.username,
            password:this.newUser.pass,
            safepass:this.newUser.checkpass,
            member:this.newUser.role,
            department:this.newUser.region,
            m_phone:this.newUser.phone,
            realname:this.newUser.company,
            contact:this.newUser.person
          }).then((res)=>{
            if(res.code == '0'){
              this.$message.closeAll()
              this.$message.success('创建成功')
              setTimeout(()=>{
                this.drawerd = false
                window.location.reload();
              },800)
            }else{
              this.$message.closeAll()
              this.$message.warning(res.msg)
            }
          })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    
    //分类
    classClose(tag) {
      // console.log('3')
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    showInput() {
      // console.log("1")
      this.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      // console.log("2")
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },

    // 数据导出
    // handleExportClick() {
    //   console.log("111")
    //   this.$refs.userListBox[this.tabType].handleExportVal()
    // },
    
    // 数据导入
    // handleImportuserClick() {
    //   // this.$refs.userListBox[this.tabType]
    //   console.log(this.$refs.userListBox[this.tabType])
    // },
  },
};
</script>

<style lang="scss" scoped>
.team{
  // margin-top: 15px;
  // background: white;
  // padding: 40px 50px;
}
.team_cn{
  margin-top: 15px;
  background: white;
  padding: 40px 50px;
  overflow: auto;
}
.team:after{
  content: "";
  display: block;
  clear: both;
}
.demo-ruleForm::v-deep {
  .el-form-item:nth-child(1) {
    margin-left: 0px;
  }
  .el-form-item:nth-last-child(1) {
    margin-left: 20px;
  }
  .jue {
    margin-left: 0 !important;
  }
  .el-form-item:nth-last-child(1) .el-form-item__content {
    margin-left: 0px !important;
  }
  .el-form-item {
    width: 30%;
    display: inline-block;
    margin-left: 30px;
  }
  .el-form-item__label {
    text-align: left;
    padding-left: 20px;
    padding-right: 0px;
    width: 80px !important;
  }
  .el-form-item__content {
    margin-left: 60px !important;
  }
  .el-select {
    width: 90%;
  }
  .el-input{
    width: 90%;
  }
}
.btns {
  padding-left: 8px;
  color: #1890ff;
}
.btns:hover {
  cursor: pointer;
}
.newly {
  margin-left: 20px;
}
.tables::v-deep {
  th:nth-child(1) {
    padding-left: 14px;
  }
  th:nth-last-child(2) {
    padding-left: 20px;
  }
  td:nth-last-child(1) {
    padding-left: 20px;
  }
  margin-top: 20px;
}
.news_right::v-deep {
  .el-drawer {
    width: 40% !important;
  }
  .el-drawer__header {
    border-bottom: 1px solid #ccc;
    padding: 15px 20px;
  }
}



.drawerd::v-deep{
    .el-drawer{
        width: 40% !important;
    }
}
.newUser::v-deep{
    .el-input{
        width: 90%;
    }
    .el-select{
        width: 100%;
    }
}
.dep::v-deep{
  margin-top: 10px;
  .el-tabs__nav-wrap::after{
    height: 0 !important;
  }
  .el-tabs__header{
    border-bottom: 2px solid #E4E7ED;
  }
}
.optionsd{
  padding-left: 40px;
}
.activeTwo{
    margin-left: 30px;
}
.activethree{
    margin-left: 50px;
}
.demo-quyuForm::v-deep{
  .el-select{
    width: 100%;
  }
}

.flex-just-sbtn {
  display: flex;
  justify-content: space-between;
}
</style>